<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        #msg,#msg2{color:red;}
        body,input{font-family: "微软雅黑";}
    </style>
    <script src="./jquery.min.js"></script>

    <script type="text/javascript">
        function check(){
            var uname = $("#uname").val();
            if(uname == null || uname == '') {
                alert("用户名不能为空");
                return;
            }
            var password = $("#pwd").val();
            if(password == null || password == ''){
                alert("密码不能为空");
                return;
            }
            login();
        }


        function reset(){
            $("uname").val("");
            $("password").val("");
        }

        function login(){
            var username = $("#uname").val();
            var password = $("#pwd").val();
            var user = {
                'username':username,
                'password':password
            };
            $.ajax({
                type:"POST",
                url:"/login",
                contentType: "application/json", //必须这样写
                //dataType:"json",
                async:false,
                data:JSON.stringify(user),
                success:function (result) {
                    var flag = result;
                    if(flag){
                        var url = "/index";
                        go2Url(url);
                        //window.location.replace(url);
                        //$(location).prop('href', url);
                    }else{
                        alert("用户名或密码错误");
                    }
                }

            });
        }

        function go2Url(url){
            var downloadDom = $('<a href="'+url+'"><span>点击触发</span></a>');
            downloadDom.find('span').click();
        }
    </script>
</head>

<body>
    <div style="text-align: center">
        <h3>欢迎登录</h3>
        <form method="post" >
            <div id="form">
                <div class="int">
                    <label for="uname">账 号：</label>
                    <input type="text" name="username" id="uname" class="input" />
                </div>
                <div class="int">
                    <label for="pwd">密 码：</label>
                    <input type="password" name="password" id="pwd" class="input" />
                </div>
                <!--填写要求验证如下：-->
                <div id="msg"></div>
                <div id="msg2"></div>
                <br>
                <input type="button" value="提交" onclick="check()"/>
                <input type="reset" value="重置" onclick="reset()"/>
            </div>
        </form>
    </div>


</body>


</html>